<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="box">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline" label-width="75px">
          <el-form-item label="姓名" prop="customerName">
            <el-input v-model.trim="listQuery.custName" placeholder="请输入姓名" clearable
                      style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="证件号" prop="certID">
            <el-input v-model.trim="listQuery.certID" placeholder="请输入证件号" clearable style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="供应商" prop="supplierID">
            <el-select @change="handleSupplierChange" v-model="listQuery.supplierID" placeholder="请选择供应商" :disabled="!!this.defaultSupplierID">
              <el-option v-for="item in supplierOptions" :key="item.supplierID" :label="item.supplierName"
                         :value="item.supplierID"/>
            </el-select>
          </el-form-item>
          <el-form-item label="服务名称">
            <el-select v-model="listQuery.serviceID" placeholder="请选择服务名称" clearable>
              <el-option v-for="item in serviceNameOptions" :key="item.serviceID" :label="item.serviceName"
                         :value="item.serviceID"/>
            </el-select>
          </el-form-item>
          <el-form-item label="使用状态">
            <el-select v-model="listQuery.usedStatus" placeholder="请选择使用状态" clearable>
              <el-option v-for="item in statusOptions" :key="item.label" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <button class="btn btn-default" type="button" @click="listSearch">查询</button>
            <!-- <a href="https://csop-api.aixin.com/excel/downloadSupplierCust" @click="exportList">导出</a> -->
            <button v-loading.fullscreen.lock="downloading" class="btn btn-lg bg-green" type="button"
                    @click="exportList"><i class="entypo-pencil"></i>导出
            </button>
          </el-form-item>
        </el-form>

        <div class="box-body">
          <div class="table-responsive">
            <el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row style="width: 100%;">
              <el-table-column label="渠道" prop="chanel" align="left" min-width="80" />
              <el-table-column label="客户号" prop="customerID" align="left" min-width="80" />
              <el-table-column label="客户名称" prop="customerName" align="left" min-width="80" />
              <el-table-column label="性别" align="left" width="60">
                <template slot-scope="scope">
                  <span>{{scope.row.gender==0?'男':'女'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="证件号" prop="identity" width="160"/>
              <el-table-column label="手机号" :formatter="filterPhoneNumber" min-width="110"/>
              <el-table-column label="保单号" min-width="100" prop="policyNumber"/>
              <el-table-column label="服务名称" min-width="80" prop="serviceName"/>
              <el-table-column label="使用状态" min-width="140" :formatter="statusFormatter"/>
              <el-table-column label="使用次数" prop="usedCount" min-width="120"/>
              <el-table-column label="使用时间" prop="lastUseDate" width="120">
              </el-table-column>
              <el-table-column label="生效日期" width="120">
                <template slot-scope="scope">{{formatDate(scope.row.dueTime)}}</template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button class="btn1" @click="handleWriteOff(scope.row)" type="text" size="small">核销</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="box-footer clearfix">
          <!-- 控制分页模块 -->
          <pagination align="right" v-show="total>0" :total="total" :page.sync="listQuery.pageNum"
                      :limit.sync="listQuery.pageSize" @pagination="getList"/>
        </div>
      </div>
    </div>
  </div>
  <!-- 核销 -->
  <el-dialog :visible.sync="writeoOffVisible" :show-close="false" v-if="writeoOffVisible"
    :close-on-click-modal="false" :append-to-body="true" width="1000px" style="margin-top: -5vh;">
    <div class="modal-header bg-white">
      <h4 id="myLargeModalLabel" class="modal-title">
          <span class="profile-rounded"><i class="fontello-wrench-outline"></i></span>&nbsp;&nbsp; 核销
      </h4>
    </div>
    <div class="box-body clearfix">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
        <el-table :data="ruleForm.listRow" :show-header="false" style="width: 100%;">
          <el-table-column width="210">
            <template slot-scope="scope">
              <el-form-item :prop="'listRow.' + scope.$index + '.serviceID'">
                <el-select disabled v-model="currentEquity.serviceID" placeholder="请选择服务名称">
                  <el-option
                    v-for="item in supplierServices"
                    :key="item.serviceID"
                    :label="item.serviceName"
                    :value="item.serviceID">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="210" align="left">
            <template slot-scope="scope">
              <el-form-item :prop="'listRow.' + scope.$index + '.consumeTime'" :rules="rules.consumeTime">
                <el-date-picker type="date" placeholder="使用时间" v-model="scope.row.consumeTime" style="width: 100%;"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="210" align="left">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.remarks" :maxlength="200" placeholder="描述" class="filter-item fl"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="210" align="left">
            <template slot-scope="scope">
              <el-form-item :prop="'listRow.' + scope.$index + '.numConsumed'" :rules="rules.numConsumed">
                <el-input-number class="filter-item fl" v-model="scope.row.numConsumed" :min="1" :max="999" label="次数"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            align="left">
            <template slot-scope="scope">
              <el-form-item>
                <button class="btn btn-lg bg-green" type="button" @click="addVerification(scope.row, 'ruleForm')">
                  新增流水
                </button>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>

    <div class="box-body clearfix">
      <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="0px" class="demo-ruleForm"
      >
        <el-table :data="ruleForm1.verificationList" :show-header="false" style="width: 100%;" max-height="400">
          <el-table-column width="210" align="left">
            <template slot-scope="scope">
              <el-form-item :prop="'verificationList.' + scope.$index + '.serviceID'" :rules="rules1.serviceID">
                <el-select v-model="scope.row.serviceID" placeholder="请选择服务名称">
                  <el-option
                    v-for="item in supplierServices"
                    :key="item.serviceID"
                    :label="item.serviceName"
                    :value="item.serviceID">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            width="210">
            <template slot-scope="scope">
              <el-form-item :prop="'verificationList.' + scope.$index + '.consumeTime'" :rules="rules1.consumeTime">
                <el-date-picker
                  type="date"
                  placeholder="使用时间"
                  v-model="scope.row.consumeTime"
                  style="width: 100%;"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="left" width="210">
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                  v-model="scope.row.remarks"
                  :maxlength="200"
                  placeholder="描述"
                  class="filter-item fl"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="210" align="left">
            <template slot-scope="scope">
              <el-form-item :prop="'verificationList.' + scope.$index + '.numConsumed'" :rules="rules1.numConsumed">
                <el-input-number class="filter-item fl" v-model="scope.row.numConsumed" :min="1" :max="999"
                                 label="次数"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="100" align="left">
            <template slot-scope="scope">
              <button class="btn btn-lg bg-green" type="button" @click="updateVerification(scope.row, 'ruleForm1')">
                确认修改
              </button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div class="attribute-operation clearfix fr" style="margin-top: 10px;">
      <button class="btn bg-aqua" type="button" @click="closeWriteoOffVisible">关闭</button>
    </div>
  </el-dialog>
  <!-- /核销 -->
</div>
